<template>
    <div class="exception" style="min-height: 500px; height: 80%;">
        <div class="exception__img-block">
            <div class="exception__img" :style="{ backgroundImage: _img }"></div>
        </div>

        <div class="exception__cont">
            <h1 class="exception__cont-title" v-html="_title"></h1>
            <div class="exception__cont-desc" v-html="_desc || locale[_type]"></div>
            <div class="exception__cont-actions">
                <div>
                    <slot></slot>
                </div>
                <a-button
                    v-if="hasCon"
                    href="{{backRouterLink}}"
                    type="primary"
                >{{ vDate.locale.backToHome }}</a-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
/*
异常页面

 成员 | 说明 | 类型 | 默认值 |
|----|----|----|-----|
| `[type]` | 页面类型，若配置，则自带对应类型默认的 `title`，`desc`，`img`，此默认设置可以被 `title`，`desc`，`img` 覆盖 | `'403','404','500'` | - |
| `[title]` | 标题 | `string` | - |
| `[desc]` | 补充描述 | `string` | - |
| `[img]` | 背景图片地址 | `string` | - |
| `[backRouterLink]` | 后退路由链接 | `string` | `/` |
| `hasCon` |是否显示 传入模板| Boolean| ，false『返回首页』按钮不生效 | - |

*/
import { ref, toRefs, watch, onMounted,reactive } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
type ExceptionType = 403 | 404 | 500;
const props = defineProps({
    type: {
        type: Number,
        default: 404
    },
    title: {
        type: String,
        default: ''
    },
    desc: {
        type: String,
        default: ''
    } ,
    hasCon: {
        type: Boolean,
        default: false
    },
    backRouterLink: {
        type: String,
        default: '/'
    },
    img: {
        type: String,
        default: ''
    }
})

let vDate = reactive({
    _type: 404 as ExceptionType,
    _title: '',
    _desc: '',
    _img: '',
    locale: null as any,
})
const { _type, _title, _desc, _img, locale } = toRefs(vDate)

vDate.locale = store.state.abc.exception

const typeSet = (value: ExceptionType) => {
    const item: { img: string; title: string } = {
        403: {
            img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
            title: '403'
        },
        404: {
            img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
            title: '404'
        },
        500: {
            img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
            title: '500'
        }
    }[value];
    if (!item) {
        vDate._img = `url('${props.img}')`;
        vDate._title = props.title;
        vDate._desc = props.desc;
        return
    };

    vDate._img = `url('${item.img}')`;
    vDate._type = value;
    vDate._title = item.title;
    vDate._desc = '';
}
typeSet(props.type as ExceptionType)

</script>
<style lang="less">
@import "@/package/theme/css/default.less";
body {
    background-color: #f5f7fa;
}
@exception-prefix: ~".exception";
@{exception-prefix} {
    display: flex;
    align-items: center;
    height: 100%;
    &__img-block {
        flex: 0 0 62.5%;
        width: 62.5%;
        padding-right: 152px;
        zoom: 1;
        &::before,
        &::after {
            display: table;
            content: " ";
        }
        &::after {
            clear: both;
            height: 0;
            font-size: 0;
            visibility: hidden;
        }
    }
    &__img {
        float: right;
        width: 100%;
        max-width: 430px;
        height: 360px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 100% 100%;
    }
    &__cont {
        flex: 1 1 auto;
        &-title {
            margin-bottom: 24px;
            color: #434e59;
            font-weight: 600;
            font-size: 72px;
            line-height: 72px;
        }
        &-desc {
            margin-bottom: 16px;
            color: @text-color-secondary;
            font-size: 20px;
            line-height: 28px;
        }
        &-actions {
            .@{ant-prefix}-btn:not(:last-child) {
                margin-right: 8px;
            }
        }
    }
}

@media screen and (max-width: @screen-xl) {
    @{exception-prefix} {
        &__img-block {
            padding-right: 88px;
        }
    }
}

@media screen and (max-width: @screen-sm) {
    @{exception-prefix} {
        display: block;
        text-align: center;
        &__img-block {
            margin: 0 auto 24px;
            padding-right: 0;
        }
    }
}

@media screen and (max-width: @screen-xs) {
    @{exception-prefix} {
        &__img-block {
            margin-bottom: -24px;
            overflow: hidden;
        }
    }
}
</style>